import BaseLayout from "@web-design/layout";
import {
  BrowserRouter as Router,
  // HashRouter as Router,
  // MemoryRouter as Router,
  Match,
  Matcher,
  MicroAppProvider,
  Outlet,
  useRouter,
} from "@web-design/micro-app-next";
//   @ts-ignore
import * as iframe from '@web-design/micro-app-next/modules/iframe'
//   @ts-ignore
import * as qiankun from '@web-design/micro-app-next/modules/qiankun'
import { AppProvider, DefaultFooter } from "@web-design/ui";
import { Button } from "antd";
import { act, useEffect } from "react";
import { AppleOutlined } from "@ant-design/icons";


console.log('**************************iframe', iframe)
const waitTime = (time) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(true);
    }, time);
  });
};
function formatMenuData(e) {
  return {
    name: e.name,
    children: e.routes,
    icon: <AppleOutlined onPointerEnterCapture={undefined} onPointerLeaveCapture={undefined} />,
    path: e.path,
  };
}
const MainLayout = () => {
  const { history, pathname } = useRouter();
  useEffect(() => {
    // setInterval(() => {
    //   emitGloblState("mainApp", +new Date());
    // }, 1000);
  }, []);

  // useEffect(() => {
  //   if (route.name) {
  //     setActiveKey(route.name)
  //     const item = items.find((v) => v.label == route.name);

  //     if (!item) {
  //       items.push({
  //         label: route.name,
  //         key: route.name,
  //         children: <MicroApp  {...route} />,
  //       });
  //       setItems([...items]);
  //     }
  //   }
  //   console.log({ route });
  //   // const un = history.listen(() => {
  //   //   alert(';as')
  //   // });
  //   // return () => {

  //   //   un();
  //   // };
  // }, [route]);
  // return  <MicroApp  {...route} />
  console.log("Outlet", Outlet);
  return (
    <BaseLayout
      history={history}
      copyright="前端设计体验中心"
      footerRender={() => <DefaultFooter copyright="前端设计中心" icp={[
        {
          title: 'sss',
          href: 'sss'
        }, {
          title: 'sss',
          href: 'sss'
        }
      ]} />}
      siderWidth={200}
      openKeys={['/home']}
      logo="http://static.xyb2b.com/images/fce0d921c0cbac87d5ed28bf3746f596.png"
      navigateTo={(e) => {
        if (e === history.location.pathname) {
          return;
        }
        history.push(e);
      }}
      title="后台管理系统"
      // fieldNames = {{
      //    name:'name',
      //    path:'path',

      // }}
      formatMenuData={formatMenuData}
      request={() => {
        return new Promise(async (resolve) => {
          await waitTime(1000);
          resolve([
            {
              path: "/home",
              name: "首页",
              routes: [
                {
                  path: "/",
                  name: "首页",
                },
                {
                  path: "/detail",
                  name: "详情页面",
                },
                {
                  path: "/form11",
                  name: "表单页面11",
                },
                {
                  path: "/form22",
                  name: "表单页面22",
                },
                {
                  path: "/scm/channel/channelWorkbench",
                  name: "渠道工作台",
                },
                // {
                //   path: "/vue3",
                //   name: "Vue3-app2",
                // },
                // {
                //   path: "/react16",
                //   name: "react16",
                // },
                // {
                //   path: "/react17",
                //   name: "react17",
                // },

                // {
                //   path: "/wujie",
                //   name: "wujie",
                // },
                // {
                //   path: "/micro-zoe",
                //   name: "micro-zoe",
                // },

              ]
            },
            {
              path: "/iframe",
              name: "财务iframe",
              routes: [
                {
                  path: "/iframe/2",
                  name: "iframe/2",
                },
              ]
            }
            //       {
            //         path: "/micro-zoe",
            //         name: "micro-zoe",
            //       },
            //       {
            //         path: "/micro-zoe",
            //         name: "micro-zoe",
            //       },
            //       {
            //         path: "/micro-zoe",
            //         name: "micro-zoe",
            //       },
            //       {
            //         path: "/micro-zoe",
            //         name: "micro-zoe",
            //       },
            //       {
            //         path: "/micro-zoe",
            //         name: "micro-zoe",
            //       },
            //       {
            //         path: "/micro-zoe",
            //         name: "micro-zoe",
            //       },
            //       {
            //         path: "/micro-zoe",
            //         name: "micro-zoe",
            //       },
            //       {
            //         path: "/micro-zoe",
            //         name: "micro-zoe",
            //       },
            //       {
            //         path: "/micro-zoe",
            //         name: "micro-zoe",
            //       },
            //       {
            //         path: "/micro-zoe",
            //         name: "micro-zoe",
            //       },
            //       {
            //         path: "/micro-zoe",
            //         name: "micro-zoe",
            //       },
            //       {
            //         path: "/micro-zoe",
            //         name: "micro-zoe",
            //       },
            //       {
            //         path: "/micro-zoe",
            //         name: "micro-zoe",
            //       },
            //       {
            //         path: "/micro-zoe",
            //         name: "micro-zoe",
            //       },
            //     ]
            // },
          ]);
        });
      }}
    >
      <Outlet />
      {/* <TabsNav /> */}

      {/* <Tabs activeKey={activeKey} items={items} /> */}
    </BaseLayout>
  );
};

const Header = () => {
  const { history } = useRouter();

  return (
    <div>
      <Button onClick={() => history.push("/")}>主页面</Button>
      <Button onClick={() => history.push("/login")}>登陆页面</Button>
    </div>
  );
};
const App2 = () => {
  return (
    <AppProvider
      commonHeaders={{


        token: 'd63b1f4d245514d5e639ad3e7f162c8cc1f879c59533891e6dfaa47efb5d10dd0dfe8a1da4355715488181cfa6af89cf'
      }}
      fileBasicUrl="https://img.league-test.xyb2b.com/"
      apiPrefix=""
      upload={{
        action: "https://boss-api-test.hiphopsaas.com/file/upload",
      }}
    >
      <Router>
        <Header />
        <MicroAppProvider
          modules={[
            iframe,
            qiankun
          ]}
          routes={[
            {
              path: "/",
              title: "首页",
              // loadCss: true,
              entry: "home.js",
            },
            {
              path: "/detail",
              title: "详情",
              // loadCss: true,
              entry: "detail.js",
            },
            {
              path: "/form11",
              title: "表单1",
              // loadCss: true,
              entry: "form.js",
            },
            {
              path: "/form22",
              title: "表单2",

              entry: "form.js",
            },
            {
              path: "/login",

              // loadCss: true,
              entry: "login.js",
              // entry:'https://static.weillan.com/www/biz-test/weillan-saas-account/1.18.0/static/pages/account/login.js?t=1700130717042'
            },
            {
              entry: "http://frontend.minio.cn.xyb2b.cn/test/channel-portal/4.0.32/static/index.html",
              // container: "#app1",
              activeModule: 'qiankun',
              name:'app1',
              activeRule: () => location.pathname.startsWith('/scm'),
            },
            // {
            //   path: "/vue3/*",
            //   name: "#app2",
            //   title:'vue3',
            //   entry: "http://localhost:8082/",
            //   container: "#app2",
            //   activeRule: ['/vue2','/vue3'],
            // },micro-zoe/
            {
              path: "/react17",
              version: "v17.0.0",
              webComponents: true,
              title: "webComponents",
              entry: "a.react17.js",
            },
            {
              path: "/react16",
              sandbox: true,
              react: "react16",
              title: "webComponents",
              entry: "react16.js",
            },
            // {
            //   path: "/wujie*",
            //   name: "wujie",
            //   container: "#wujie",
            //   wujie: true,
            //   title: "无界",
            //   entry: " http://localhost:9002",
            // },
            {
              activeModule: 'iframe',
              title: "iframe",
              activeRule: () => location.pathname.startsWith('/iframe'),
              entry: " http://localhost:9002",
            },
          ]}
          name={""}
        >
          <Matcher>
            <Match path="*" element={<MainLayout />} />
            <Match path="/login" element={<Outlet />} />
          </Matcher>
        </MicroAppProvider>
      </Router>
    </AppProvider>
  );
};
export default App2;
